<template>
  <div class="box-active">
    <div class="avatar">
      <img :src="props.message.avatar" alt="avatar">
    </div>
    <div class="message">
      <div class="title">
        <span>{{ props.message.title}}</span>
      </div>
      <div class="context">
        <span>{{ props.message.follow+' 关注' }}</span>
        <span>{{ props.message.fans +' 粉丝'}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>


const props = defineProps({
  message: {
    required: true,
  }
})

</script>

<style lang="less" scoped>
.box-active {
  width: 100%;
  height: 60px;
  margin: 5px 0;
  background-image: url("@/assets/icons/transparent.png");
  backdrop-filter: blur(2);
  border-radius: 5px;
  display: flex;
  padding: 0 5px;
  align-items: center;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
    }
  }

  .message {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-evenly;
    margin-left: 10px;
    padding:5px;
    color: white;
    .context{
      width: 200px;
      font-size: 12px;
      white-space:nowrap;
      overflow:hidden;
      overflow-y: auto;
      text-overflow:ellipsis;
      :first-child{
        padding-right: 20px;
      }
    }
  }
}
</style>